﻿/*
 * jPicker 1.1.6
 *
 * jQuery Plugin for Photoshop style color picker
 *
 * Copyright (c) 2010 Christopher T. Tillman
 * Digital Magic Productions, Inc. (http://www.digitalmagicpro.com/)
 * MIT style license, FREE to use, alter, copy, sell, and especially ENHANCE
 *
 * Painstakingly ported from John Dyers' excellent work on his own color picker based on the Prototype framework.
 *
 * John Dyers' website: (http://johndyer.name)
 * Color Picker page:   (http://johndyer.name/post/2007/09/PhotoShop-like-JavaScript-Color-Picker.aspx)
 *
 */
(function($, version) {
	Math.precision = function(value, precision) {
		if (precision === undefined)
			precision = 0;
		return Math.round(value * Math.pow(10, precision)) / Math.pow(10, precision);
	};
	// encapsulate slider functionality for the ColorMap and
	// ColorBar - could be useful to use a jQuery UI draggable
	// for this with certain extensions
	var Slider = function(bar, options) {
		// private properties, methods, and events - keep
		// these variables and classes invisible to outside
		// code
		var $this = this,
		// the arrow image to drag
		arrow = bar.find('img:first'), minX = 0, maxX = 100, rangeX = 100, minY = 0, maxY = 100, rangeY = 100, x = 0, y = 0, offset, timeout, changeEvents = new Array(), fireChangeEvents = function(context) {
			for (var i = 0; i < changeEvents.length; i++)
				changeEvents[i].call($this, $this, context);
		},
		// bind the mousedown to the bar not the arrow for quick
		// snapping to the clicked location
		mouseDown = function(e) {
			var off = bar.offset();
			offset = {
				l: off.left | 0,
				t: off.top | 0
			};
			clearTimeout(timeout);
			// using setTimeout for visual updates -
			// once the style is updated the browser
			// will re-render internally allowing the
			// next Javascript to run
			timeout = setTimeout(function() {
				setValuesFromMousePosition.call($this, e);
			}, 0);
			// Bind mousemove and mouseup event to the document so it responds
			// when dragged of of the bar - we will unbind these when on mouseup
			// to save processing
			$(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp);
			// don't try to select anything or drag the
			// image to the desktop
			e.preventDefault();
		},
		// set the values as the mouse moves
		mouseMove = function(e) {
			clearTimeout(timeout);
			timeout = setTimeout(function() {
				setValuesFromMousePosition.call($this, e);
			}, 0);
			e.stopPropagation();
			e.preventDefault();
			return false;
		}, mouseUp = // unbind the document events - they aren't needed when
		// not dragging
		function(e) {
			$(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);
			e.stopPropagation();
			e.preventDefault();
			return false;
		},
		// calculate mouse position and set
		// value within the current range
		setValuesFromMousePosition = function(e) {
			var locX = e.pageX - offset.l, locY = e.pageY - offset.t, barW = bar.w, // local
			// copies
			// for
			// YUI
			// compressor
			barH = bar.h;
			// keep the arrow within the bounds of the bar
			if (locX < 0)
				locX = 0;
			else if (locX > barW)
				locX = barW;
			if (locY < 0)
				locY = 0;
			else if (locY > barH)
				locY = barH;
			val.call($this, 'xy', {
				x: ((locX / barW) * rangeX) + minX,
				y: ((locY / barH) * rangeY) + minY
			});
		}, draw = function() {
			var arrowOffsetX = 0, arrowOffsetY = 0, barW = bar.w, barH = bar.h, arrowW = arrow.w, arrowH = arrow.h;
			setTimeout(function() {
				// range is greater than zero
				if (rangeX > 0) {
					// constrain to bounds
					if (x == maxX)
						arrowOffsetX = barW;
					else
						arrowOffsetX = ((x / rangeX) * barW) | 0;
				}
				// range is greater than zero
				if (rangeY > 0) {
					// constrain to bounds
					if (y == maxY)
						arrowOffsetY = barH;
					else
						arrowOffsetY = ((y / rangeY) * barH) | 0;
				}
				// if arrow width is greater than bar width, center arrow and
				// prevent horizontal dragging
				if (arrowW >= barW)
					arrowOffsetX = (barW >> 1) - (arrowW >> 1); // number >> 1 -
				// superfast
				// bitwise
				// divide by two
				// and truncate
				// (move bits
				// over one bit
				// discarding
				// lowest)
				else
					arrowOffsetX -= arrowW >> 1;
				// if arrow height is greater than bar height, center arrow and
				// prevent vertical dragging
				if (arrowH >= barH)
					arrowOffsetY = (barH >> 1) - (arrowH >> 1);
				else
					arrowOffsetY -= arrowH >> 1;
				// set the arrow position based on these offsets
				arrow.css({
					left: arrowOffsetX + 'px',
					top: arrowOffsetY + 'px'
				});
			}, 0);
		}, val = function(name, value, context) {
			var set = value !== undefined;
			if (!set) {
				if (name === undefined || name == null)
					name = 'xy';
				switch (name.toLowerCase()) {
				case 'x':
					return x;
				case 'y':
					return y;
				case 'xy':
				default:
					return {
						x: x,
						y: y
					};
				}
			}
			if (context != null && context == $this)
				return;
			var changed = false, newX, newY;
			if (name == null)
				name = 'xy';
			switch (name.toLowerCase()) {
			case 'x':
				newX = value && (value.x && value.x | 0 || value | 0) || 0;
				break;
			case 'y':
				newY = value && (value.y && value.y | 0 || value | 0) || 0;
				break;
			case 'xy':
			default:
				newX = value && value.x && value.x | 0 || 0;
				newY = value && value.y && value.y | 0 || 0;
				break;
			}
			if (newX != null) {
				if (newX < minX)
					newX = minX;
				else if (newX > maxX)
					newX = maxX;
				if (x != newX) {
					x = newX;
					changed = true;
				}
			}
			if (newY != null) {
				if (newY < minY)
					newY = minY;
				else if (newY > maxY)
					newY = maxY;
				if (y != newY) {
					y = newY;
					changed = true;
				}
			}
			changed && fireChangeEvents.call($this, context || $this);
		}, range = function(name, value) {
			var set = value !== undefined;
			if (!set) {
				if (name === undefined || name == null)
					name = 'all';
				switch (name.toLowerCase()) {
				case 'minx':
					return minX;
				case 'maxx':
					return maxX;
				case 'rangex':
					return {
						minX: minX,
						maxX: maxX,
						rangeX: rangeX
					};
				case 'miny':
					return minY;
				case 'maxy':
					return maxY;
				case 'rangey':
					return {
						minY: minY,
						maxY: maxY,
						rangeY: rangeY
					};
				case 'all':
				default:
					return {
						minX: minX,
						maxX: maxX,
						rangeX: rangeX,
						minY: minY,
						maxY: maxY,
						rangeY: rangeY
					};
				}
			}
			var changed = false, newMinX, newMaxX, newMinY, newMaxY;
			if (name == null)
				name = 'all';
			switch (name.toLowerCase()) {
			case 'minx':
				newMinX = value && (value.minX && value.minX | 0 || value | 0) || 0;
				break;
			case 'maxx':
				newMaxX = value && (value.maxX && value.maxX | 0 || value | 0) || 0;
				break;
			case 'rangex':
				newMinX = value && value.minX && value.minX | 0 || 0;
				newMaxX = value && value.maxX && value.maxX | 0 || 0;
				break;
			case 'miny':
				newMinY = value && (value.minY && value.minY | 0 || value | 0) || 0;
				break;
			case 'maxy':
				newMaxY = value && (value.maxY && value.maxY | 0 || value | 0) || 0;
				break;
			case 'rangey':
				newMinY = value && value.minY && value.minY | 0 || 0;
				newMaxY = value && value.maxY && value.maxY | 0 || 0;
				break;
			case 'all':
			default:
				newMinX = value && value.minX && value.minX | 0 || 0;
				newMaxX = value && value.maxX && value.maxX | 0 || 0;
				newMinY = value && value.minY && value.minY | 0 || 0;
				newMaxY = value && value.maxY && value.maxY | 0 || 0;
				break;
			}
			if (newMinX != null && minX != newMinX) {
				minX = newMinX;
				rangeX = maxX - minX;
			}
			if (newMaxX != null && maxX != newMaxX) {
				maxX = newMaxX;
				rangeX = maxX - minX;
			}
			if (newMinY != null && minY != newMinY) {
				minY = newMinY;
				rangeY = maxY - minY;
			}
			if (newMaxY != null && maxY != newMaxY) {
				maxY = newMaxY;
				rangeY = maxY - minY;
			}
		}, bind = function(callback) {
			if ($.isFunction(callback))
				changeEvents.push(callback);
		}, unbind = function(callback) {
			if (!$.isFunction(callback))
				return;
			var i;
			while ((i = $.inArray(callback, changeEvents)) != -1)
				changeEvents.splice(i, 1);
		}, destroy = function() {
			// unbind all possible events and null objects
			$(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);
			bar.unbind('mousedown', mouseDown);
			bar = null;
			arrow = null;
			changeEvents = null;
		};
		$.extend(true, $this, // public properties, methods, and event
		// bindings - these we need to access from other
		// controls
		{
			val: val,
			range: range,
			bind: bind,
			unbind: unbind,
			destroy: destroy
		});
		// initialize this control
		arrow.src = options.arrow && options.arrow.image;
		arrow.w = options.arrow && options.arrow.width || arrow.width();
		arrow.h = options.arrow && options.arrow.height || arrow.height();
		bar.w = options.map && options.map.width || bar.width();
		bar.h = options.map && options.map.height || bar.height();
		// bind mousedown event
		bar.bind('mousedown', mouseDown);
		bind.call($this, draw);
	}, ColorValuePicker = // controls for all the input elements for the
	// typing in color values
	function(picker, color, bindedHex, alphaPrecision) {
		var $this = this, // private properties and methods
		inputs = picker.find('td.Text input'), red = inputs.eq(3), green = inputs.eq(4), blue = inputs.eq(5), alpha = inputs.length > 7 ? inputs.eq(6) : null, hue = inputs.eq(0), saturation = inputs.eq(1), value = inputs.eq(2), hex = inputs.eq(inputs.length > 7 ? 7 : 6), ahex = inputs.length > 7 ? inputs.eq(8) : null, keyDown = // input
		// box
		// key
		// down
		// -
		// use
		// arrows
		// to
		// alter
		// color
		function(e) {
			if (e.target.value == '' && e.target != hex.get(0) && (bindedHex != null && e.target != bindedHex.get(0) || bindedHex == null))
				return;
			if (!validateKey(e))
				return e;
			switch (e.target) {
			case red.get(0):
				switch (e.keyCode) {
				case 38:
					red.val(setValueInRange.call($this, (red.val() << 0) + 1, 0, 255));
					color.val('r', red.val(), e.target);
					return false;
				case 40:
					red.val(setValueInRange.call($this, (red.val() << 0) - 1, 0, 255));
					color.val('r', red.val(), e.target);
					return false;
				}
				break;
			case green.get(0):
				switch (e.keyCode) {
				case 38:
					green.val(setValueInRange.call($this, (green.val() << 0) + 1, 0, 255));
					color.val('g', green.val(), e.target);
					return false;
				case 40:
					green.val(setValueInRange.call($this, (green.val() << 0) - 1, 0, 255));
					color.val('g', green.val(), e.target);
					return false;
				}
				break;
			case blue.get(0):
				switch (e.keyCode) {
				case 38:
					blue.val(setValueInRange.call($this, (blue.val() << 0) + 1, 0, 255));
					color.val('b', blue.val(), e.target);
					return false;
				case 40:
					blue.val(setValueInRange.call($this, (blue.val() << 0) - 1, 0, 255));
					color.val('b', blue.val(), e.target);
					return false;
				}
				break;
			case alpha && alpha.get(0):
				switch (e.keyCode) {
				case 38:
					alpha.val(setValueInRange.call($this, parseFloat(alpha.val()) + 1, 0, 100));
					color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
					return false;
				case 40:
					alpha.val(setValueInRange.call($this, parseFloat(alpha.val()) - 1, 0, 100));
					color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
					return false;
				}
				break;
			case hue.get(0):
				switch (e.keyCode) {
				case 38:
					hue.val(setValueInRange.call($this, (hue.val() << 0) + 1, 0, 360));
					color.val('h', hue.val(), e.target);
					return false;
				case 40:
					hue.val(setValueInRange.call($this, (hue.val() << 0) - 1, 0, 360));
					color.val('h', hue.val(), e.target);
					return false;
				}
				break;
			case saturation.get(0):
				switch (e.keyCode) {
				case 38:
					saturation.val(setValueInRange.call($this, (saturation.val() << 0) + 1, 0, 100));
					color.val('s', saturation.val(), e.target);
					return false;
				case 40:
					saturation.val(setValueInRange.call($this, (saturation.val() << 0) - 1, 0, 100));
					color.val('s', saturation.val(), e.target);
					return false;
				}
				break;
			case value.get(0):
				switch (e.keyCode) {
				case 38:
					value.val(setValueInRange.call($this, (value.val() << 0) + 1, 0, 100));
					color.val('v', value.val(), e.target);
					return false;
				case 40:
					value.val(setValueInRange.call($this, (value.val() << 0) - 1, 0, 100));
					color.val('v', value.val(), e.target);
					return false;
				}
				break;
			}
		}, keyUp = // input box key up - validate value and set color
		function(e) {
			if (e.target.value == '' && e.target != hex.get(0) && (bindedHex != null && e.target != bindedHex.get(0) || bindedHex == null))
				return;
			if (!validateKey(e))
				return e;
			switch (e.target) {
			case red.get(0):
				red.val(setValueInRange.call($this, red.val(), 0, 255));
				color.val('r', red.val(), e.target);
				break;
			case green.get(0):
				green.val(setValueInRange.call($this, green.val(), 0, 255));
				color.val('g', green.val(), e.target);
				break;
			case blue.get(0):
				blue.val(setValueInRange.call($this, blue.val(), 0, 255));
				color.val('b', blue.val(), e.target);
				break;
			case alpha && alpha.get(0):
				alpha.val(setValueInRange.call($this, alpha.val(), 0, 100));
				color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
				break;
			case hue.get(0):
				hue.val(setValueInRange.call($this, hue.val(), 0, 360));
				color.val('h', hue.val(), e.target);
				break;
			case saturation.get(0):
				saturation.val(setValueInRange.call($this, saturation.val(), 0, 100));
				color.val('s', saturation.val(), e.target);
				break;
			case value.get(0):
				value.val(setValueInRange.call($this, value.val(), 0, 100));
				color.val('v', value.val(), e.target);
				break;
			case hex.get(0):
				hex.val(hex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 6));
				bindedHex && bindedHex.val(hex.val());
				color.val('hex', hex.val() != '' ? hex.val() : null, e.target);
				break;
			case bindedHex && bindedHex.get(0):
				bindedHex.val(bindedHex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 6));
				hex.val(bindedHex.val());
				color.val('hex', bindedHex.val() != '' ? bindedHex.val() : null, e.target);
				break;
			case ahex && ahex.get(0):
				ahex.val(ahex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 2));
				color.val('a', ahex.val() != null ? parseInt(ahex.val(), 16) : null, e.target);
				break;
			}
		}, blur = // input box blur - reset to original if value empty
		function(e) {
			if (color.val() != null) {
				switch (e.target) {
				case red.get(0):
					red.val(color.val('r'));
					break;
				case green.get(0):
					green.val(color.val('g'));
					break;
				case blue.get(0):
					blue.val(color.val('b'));
					break;
				case alpha && alpha.get(0):
					alpha.val(Math.precision((color.val('a') * 100) / 255, alphaPrecision));
					break;
				case hue.get(0):
					hue.val(color.val('h'));
					break;
				case saturation.get(0):
					saturation.val(color.val('s'));
					break;
				case value.get(0):
					value.val(color.val('v'));
					break;
				case hex.get(0):
				case bindedHex && bindedHex.get(0):
					hex.val(color.val('hex'));
					bindedHex && bindedHex.val(color.val('hex'));
					break;
				case ahex && ahex.get(0):
					ahex.val(color.val('ahex').substring(6));
					break;
				}
			}
		}, validateKey = // validate key
		function(e) {
			switch (e.keyCode) {
			case 9:
			case 16:
			case 29:
			case 37:
			case 39:
				return false;
			case 'c'.charCodeAt():
			case 'v'.charCodeAt():
				if (e.ctrlKey)
					return false;
			}
			return true;
		}, setValueInRange = // constrain value within range
		function(value, min, max) {
			if (value == '' || isNaN(value))
				return min;
			if (value > max)
				return max;
			if (value < min)
				return min;
			return value;
		}, colorChanged = function(ui, context) {
			var all = ui.val('all');
			if (context != red.get(0))
				red.val(all != null ? all.r : '');
			if (context != green.get(0))
				green.val(all != null ? all.g : '');
			if (context != blue.get(0))
				blue.val(all != null ? all.b : '');
			if (alpha && context != alpha.get(0))
				alpha.val(all != null ? Math.precision((all.a * 100) / 255, alphaPrecision) : '');
			if (context != hue.get(0))
				hue.val(all != null ? all.h : '');
			if (context != saturation.get(0))
				saturation.val(all != null ? all.s : '');
			if (context != value.get(0))
				value.val(all != null ? all.v : '');
			if (context != hex.get(0) && (bindedHex && context != bindedHex.get(0) || !bindedHex))
				hex.val(all != null ? all.hex : '');
			if (bindedHex && context != bindedHex.get(0) && context != hex.get(0))
				bindedHex.val(all != null ? all.hex : '');
			if (ahex && context != ahex.get(0))
				ahex.val(all != null ? all.ahex.substring(6) : '');
		}, destroy = function() {
			// unbind all events and null objects
			red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).unbind('keyup', keyUp).unbind('blur', blur);
			red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).unbind('keydown', keyDown);
			color.unbind(colorChanged);
			red = null;
			green = null;
			blue = null;
			alpha = null;
			hue = null;
			saturation = null;
			value = null;
			hex = null;
			ahex = null;
		};
		$.extend(true, $this, // public properties and methods
		{
			destroy: destroy
		});
		red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).bind('keyup', keyUp).bind('blur', blur);
		red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).bind('keydown', keyDown);
		color.bind(colorChanged);
	};
	$.jPicker = {
		// array holding references to each active instance of the
		// control
		List: [],
		// color object - we will be able to assign by any color space
		// type or retrieve any color space info
		// we want this public so we can optionally assign new color objects to
		// initial values using inputs other than a string hex value (also
		// supported)
		Color: function(init) {
			var $this = this, r, g, b, a, h, s, v, changeEvents = new Array(), fireChangeEvents = function(context) {
				for (var i = 0; i < changeEvents.length; i++)
					changeEvents[i].call($this, $this, context);
			}, val = function(name, value, context) {
				var set = value !== undefined;
				if (!set) {
					if (name === undefined || name == null || name == '')
						name = 'all';
					if (r == null)
						return null;
					switch (name.toLowerCase()) {
					case 'ahex':
						return ColorMethods.rgbaToHex({
							r: r,
							g: g,
							b: b,
							a: a
						});
					case 'hex':
						return val('ahex').substring(0, 6);
					case 'all':
						return {
							r: r,
							g: g,
							b: b,
							a: a,
							h: h,
							s: s,
							v: v,
							hex: val.call($this, 'hex'),
							ahex: val.call($this, 'ahex')
						};
					default:
						var ret = {};
						for (var i = 0; i < name.length; i++) {
							switch (name.charAt(i)) {
							case 'r':
								if (name.length == 1)
									ret = r;
								else
									ret.r = r;
								break;
							case 'g':
								if (name.length == 1)
									ret = g;
								else
									ret.g = g;
								break;
							case 'b':
								if (name.length == 1)
									ret = b;
								else
									ret.b = b;
								break;
							case 'a':
								if (name.length == 1)
									ret = a;
								else
									ret.a = a;
								break;
							case 'h':
								if (name.length == 1)
									ret = h;
								else
									ret.h = h;
								break;
							case 's':
								if (name.length == 1)
									ret = s;
								else
									ret.s = s;
								break;
							case 'v':
								if (name.length == 1)
									ret = v;
								else
									ret.v = v;
								break;
							}
						}
						return ret == {} ? val.call($this, 'all') : ret;
						break;
					}
				}
				if (context != null && context == $this)
					return;
				var changed = false;
				if (name == null)
					name = '';
				if (value == null) {
					if (r != null) {
						r = null;
						changed = true;
					}
					if (g != null) {
						g = null;
						changed = true;
					}
					if (b != null) {
						b = null;
						changed = true;
					}
					if (a != null) {
						a = null;
						changed = true;
					}
					if (h != null) {
						h = null;
						changed = true;
					}
					if (s != null) {
						s = null;
						changed = true;
					}
					if (v != null) {
						v = null;
						changed = true;
					}
					changed && fireChangeEvents.call($this, context || $this);
					return;
				}
				switch (name.toLowerCase()) {
				case 'ahex':
				case 'hex':
					var ret = ColorMethods.hexToRgba(value && (value.ahex || value.hex) || value || '00000000');
					val.call($this, 'rgba', {
						r: ret.r,
						g: ret.g,
						b: ret.b,
						a: name == 'ahex' ? ret.a : a != null ? a : 255
					}, context);
					break;
				default:
					if (value && (value.ahex != null || value.hex != null)) {
						val.call($this, 'ahex', value.ahex || value.hex || '00000000', context);
						return;
					}
					var newV = {}, rgb = false, hsv = false;
					if (value.r !== undefined && !name.indexOf('r') == -1)
						name += 'r';
					if (value.g !== undefined && !name.indexOf('g') == -1)
						name += 'g';
					if (value.b !== undefined && !name.indexOf('b') == -1)
						name += 'b';
					if (value.a !== undefined && !name.indexOf('a') == -1)
						name += 'a';
					if (value.h !== undefined && !name.indexOf('h') == -1)
						name += 'h';
					if (value.s !== undefined && !name.indexOf('s') == -1)
						name += 's';
					if (value.v !== undefined && !name.indexOf('v') == -1)
						name += 'v';
					for (var i = 0; i < name.length; i++) {
						switch (name.charAt(i)) {
						case 'r':
							if (hsv)
								continue;
							rgb = true;
							newV.r = value && value.r && value.r | 0 || value && value | 0 || 0;
							if (newV.r < 0)
								newV.r = 0;
							else if (newV.r > 255)
								newV.r = 255;
							if (r != newV.r) {
								r = newV.r;
								changed = true;
							}
							break;
						case 'g':
							if (hsv)
								continue;
							rgb = true;
							newV.g = value && value.g && value.g | 0 || value && value | 0 || 0;
							if (newV.g < 0)
								newV.g = 0;
							else if (newV.g > 255)
								newV.g = 255;
							if (g != newV.g) {
								g = newV.g;
								changed = true;
							}
							break;
						case 'b':
							if (hsv)
								continue;
							rgb = true;
							newV.b = value && value.b && value.b | 0 || value && value | 0 || 0;
							if (newV.b < 0)
								newV.b = 0;
							else if (newV.b > 255)
								newV.b = 255;
							if (b != newV.b) {
								b = newV.b;
								changed = true;
							}
							break;
						case 'a':
							newV.a = value && value.a != null ? value.a | 0 : value != null ? value | 0 : 255;
							if (newV.a < 0)
								newV.a = 0;
							else if (newV.a > 255)
								newV.a = 255;
							if (a != newV.a) {
								a = newV.a;
								changed = true;
							}
							break;
						case 'h':
							if (rgb)
								continue;
							hsv = true;
							newV.h = value && value.h && value.h | 0 || value && value | 0 || 0;
							if (newV.h < 0)
								newV.h = 0;
							else if (newV.h > 360)
								newV.h = 360;
							if (h != newV.h) {
								h = newV.h;
								changed = true;
							}
							break;
						case 's':
							if (rgb)
								continue;
							hsv = true;
							newV.s = value && value.s != null ? value.s | 0 : value != null ? value | 0 : 100;
							if (newV.s < 0)
								newV.s = 0;
							else if (newV.s > 100)
								newV.s = 100;
							if (s != newV.s) {
								s = newV.s;
								changed = true;
							}
							break;
						case 'v':
							if (rgb)
								continue;
							hsv = true;
							newV.v = value && value.v != null ? value.v | 0 : value != null ? value | 0 : 100;
							if (newV.v < 0)
								newV.v = 0;
							else if (newV.v > 100)
								newV.v = 100;
							if (v != newV.v) {
								v = newV.v;
								changed = true;
							}
							break;
						}
					}
					if (changed) {
						if (rgb) {
							r = r || 0;
							g = g || 0;
							b = b || 0;
							var ret = ColorMethods.rgbToHsv({
								r: r,
								g: g,
								b: b
							});
							h = ret.h;
							s = ret.s;
							v = ret.v;
						} else if (hsv) {
							h = h || 0;
							s = s != null ? s : 100;
							v = v != null ? v : 100;
							var ret = ColorMethods.hsvToRgb({
								h: h,
								s: s,
								v: v
							});
							r = ret.r;
							g = ret.g;
							b = ret.b;
						}
						a = a != null ? a : 255;
						fireChangeEvents.call($this, context || $this);
					}
					break;
				}
			}, bind = function(callback) {
				if ($.isFunction(callback))
					changeEvents.push(callback);
			}, unbind = function(callback) {
				if (!$.isFunction(callback))
					return;
				var i;
				while ((i = $.inArray(callback, changeEvents)) != -1)
					changeEvents.splice(i, 1);
			}, destroy = function() {
				changeEvents = null;
			}
			$.extend(true, $this, // public properties and methods
			{
				val: val,
				bind: bind,
				unbind: unbind,
				destroy: destroy
			});
			if (init) {
				if (init.ahex != null)
					val('ahex', init);
				else if (init.hex != null)
					val((init.a != null ? 'a' : '') + 'hex', init.a != null ? {
						ahex: init.hex + ColorMethods.intToHex(init.a)
					} : init);
				else if (init.r != null && init.g != null && init.b != null)
					val('rgb' + (init.a != null ? 'a' : ''), init);
				else if (init.h != null && init.s != null && init.v != null)
					val('hsv' + (init.a != null ? 'a' : ''), init);
			}
		},
		ColorMethods: // color conversion methods - make public to give use to
		// external scripts
		{
			hexToRgba: function(hex) {
				hex = this.validateHex(hex);
				if (hex == '')
					return {
						r: null,
						g: null,
						b: null,
						a: null
					};
				var r = '00', g = '00', b = '00', a = '255';
				if (hex.length == 6)
					hex += 'ff';
				if (hex.length > 6) {
					r = hex.substring(0, 2);
					g = hex.substring(2, 4);
					b = hex.substring(4, 6);
					a = hex.substring(6, hex.length);
				} else {
					if (hex.length > 4) {
						r = hex.substring(4, hex.length);
						hex = hex.substring(0, 4);
					}
					if (hex.length > 2) {
						g = hex.substring(2, hex.length);
						hex = hex.substring(0, 2);
					}
					if (hex.length > 0)
						b = hex.substring(0, hex.length);
				}
				return {
					r: this.hexToInt(r),
					g: this.hexToInt(g),
					b: this.hexToInt(b),
					a: this.hexToInt(a)
				};
			},
			validateHex: function(hex) {
				hex = hex.toLowerCase().replace(/[^a-f0-9]/g, '');
				if (hex.length > 8)
					hex = hex.substring(0, 8);
				return hex;
			},
			rgbaToHex: function(rgba) {
				return this.intToHex(rgba.r) + this.intToHex(rgba.g) + this.intToHex(rgba.b) + this.intToHex(rgba.a);
			},
			intToHex: function(dec) {
				var result = (dec | 0).toString(16);
				if (result.length == 1)
					result = ('0' + result);
				return result.toLowerCase();
			},
			hexToInt: function(hex) {
				return parseInt(hex, 16);
			},
			rgbToHsv: function(rgb) {
				var r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255, hsv = {
					h: 0,
					s: 0,
					v: 0
				}, min = 0, max = 0, delta;
				if (r >= g && r >= b) {
					max = r;
					min = g > b ? b : g;
				} else if (g >= b && g >= r) {
					max = g;
					min = r > b ? b : r;
				} else {
					max = b;
					min = g > r ? r : g;
				}
				hsv.v = max;
				hsv.s = max ? (max - min) / max : 0;
				if (!hsv.s)
					hsv.h = 0;
				else {
					delta = max - min;
					if (r == max)
						hsv.h = (g - b) / delta;
					else if (g == max)
						hsv.h = 2 + (b - r) / delta;
					else
						hsv.h = 4 + (r - g) / delta;
					hsv.h = parseInt(hsv.h * 60);
					if (hsv.h < 0)
						hsv.h += 360;
				}
				hsv.s = (hsv.s * 100) | 0;
				hsv.v = (hsv.v * 100) | 0;
				return hsv;
			},
			hsvToRgb: function(hsv) {
				var rgb = {
					r: 0,
					g: 0,
					b: 0,
					a: 100
				}, h = hsv.h, s = hsv.s, v = hsv.v;
				if (s == 0) {
					if (v == 0)
						rgb.r = rgb.g = rgb.b = 0;
					else
						rgb.r = rgb.g = rgb.b = (v * 255 / 100) | 0;
				} else {
					if (h == 360)
						h = 0;
					h /= 60;
					s = s / 100;
					v = v / 100;
					var i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - (s * f)), t = v * (1 - (s * (1 - f)));
					switch (i) {
					case 0:
						rgb.r = v;
						rgb.g = t;
						rgb.b = p;
						break;
					case 1:
						rgb.r = q;
						rgb.g = v;
						rgb.b = p;
						break;
					case 2:
						rgb.r = p;
						rgb.g = v;
						rgb.b = t;
						break;
					case 3:
						rgb.r = p;
						rgb.g = q;
						rgb.b = v;
						break;
					case 4:
						rgb.r = t;
						rgb.g = p;
						rgb.b = v;
						break;
					case 5:
						rgb.r = v;
						rgb.g = p;
						rgb.b = q;
						break;
					}
					rgb.r = (rgb.r * 255) | 0;
					rgb.g = (rgb.g * 255) | 0;
					rgb.b = (rgb.b * 255) | 0;
				}
				return rgb;
			}
		}
	};
	var Color = $.jPicker.Color, List = $.jPicker.List, ContainerList = [], ObjectList = [], ColorMethods = $.jPicker.ColorMethods; // local
	// copies
	// for
	// YUI
	// compressor
	$.fn.jPicker = function(options) {
		var $arguments = arguments;
		return this.each(function() {
			// local
			// copies
			// for
			// YUI
			// compressor
			var $this = this, settings = $.extend(true, {}, $.fn.jPicker.defaults, options);

			// Add color
			// picker
			// icon if
			// binding
			// to an
			// input
			// element
			// and bind
			// the
			// events to
			// the input
			if ($($this).get(0).nodeName.toLowerCase() == 'input') {
				$.extend(true, settings, {
					window: {
						bindToInput: true,
						expandable: true,
						input: $($this)
					}
				});
				if ($($this).val() == '') {
					settings.color.active = new Color({
						hex: null
					});
					settings.color.current = new Color({
						hex: null
					});
				} else if (ColorMethods.validateHex($($this).val())) {
					settings.color.active = new Color({
						hex: $($this).val(),
						a: settings.color.active.val('a')
					});
					settings.color.current = new Color({
						hex: $($this).val(),
						a: settings.color.active.val('a')
					});
				}
			}
			if (settings.window.expandable)
				$($this).after('<span class="jPicker"><span class="Icon"><span class="Color">&nbsp;</span><span class="Alpha">&nbsp;</span><span class="Image" title="点击打开颜色选择器">&nbsp;</span><span class="Container">&nbsp;</span></span></span>');
			else
				settings.window.liveUpdate = false; // Basic control binding for
			// inline use - You will
			// need to override the
			// liveCallback or
			// commitCallback function
			// to retrieve results
			var isLessThanIE7 = parseFloat(navigator.appVersion.split('MSIE')[1]) < 7 && document.body.filters, // needed
			// to
			// run
			// the
			// AlphaImageLoader
			// function
			// for
			// IE6
			container = null, colorMapDiv = null, colorBarDiv = null, colorMapL1 = null, // different
			// layers
			// of
			// colorMap
			// and
			// colorBar
			colorMapL2 = null, colorMapL3 = null, colorBarL1 = null, colorBarL2 = null, colorBarL3 = null, colorBarL4 = null, colorBarL5 = null, colorBarL6 = null, colorMap = null, // color
			// maps
			colorBar = null, colorPicker = null, elementStartX = null, // Used
			// to
			// record
			// the
			// starting
			// css
			// positions
			// for
			// dragging
			// the
			// control
			elementStartY = null, pageStartX = null, // Used to record the
			// mousedown coordinates
			// for dragging the
			// control
			pageStartY = null, activePreview = null, // color boxes above the
			// radio buttons
			currentPreview = null, okButton = null, cancelButton = null, grid = null, // preset
			// colors
			// grid
			iconColor = null, // iconColor for popup icon
			iconAlpha = null, // iconAlpha for popup icon
			iconImage = null, // iconImage popup icon
			moveBar = null, // drag bar
			setColorMode = // set color mode and update visuals for the new
			// color mode
			function(colorMode) {
				// local copies for YUI compressor
				var active = color.active, clientPath = images.clientPath, hex = active.val('hex'), rgbMap, rgbBar;
				settings.color.mode = colorMode;
				switch (colorMode) {
				case 'h':
					setTimeout(function() {
						setBG.call($this, colorMapDiv, 'transparent');
						setImgLoc.call($this, colorMapL1, 0);
						setAlpha.call($this, colorMapL1, 100);
						setImgLoc.call($this, colorMapL2, 260);
						setAlpha.call($this, colorMapL2, 100);
						setBG.call($this, colorBarDiv, 'transparent');
						setImgLoc.call($this, colorBarL1, 0);
						setAlpha.call($this, colorBarL1, 100);
						setImgLoc.call($this, colorBarL2, 260);
						setAlpha.call($this, colorBarL2, 100);
						setImgLoc.call($this, colorBarL3, 260);
						setAlpha.call($this, colorBarL3, 100);
						setImgLoc.call($this, colorBarL4, 260);
						setAlpha.call($this, colorBarL4, 100);
						setImgLoc.call($this, colorBarL6, 260);
						setAlpha.call($this, colorBarL6, 100);
					}, 0);
					colorMap.range('all', {
						minX: 0,
						maxX: 100,
						minY: 0,
						maxY: 100
					});
					colorBar.range('rangeY', {
						minY: 0,
						maxY: 360
					});
					if (active.val('ahex') == null)
						break;
					colorMap.val('xy', {
						x: active.val('s'),
						y: 100 - active.val('v')
					}, colorMap);
					colorBar.val('y', 360 - active.val('h'), colorBar);
					break;
				case 's':
					setTimeout(function() {
						setBG.call($this, colorMapDiv, 'transparent');
						setImgLoc.call($this, colorMapL1, -260);
						setImgLoc.call($this, colorMapL2, -520);
						setImgLoc.call($this, colorBarL1, -260);
						setImgLoc.call($this, colorBarL2, -520);
						setImgLoc.call($this, colorBarL6, 260);
						setAlpha.call($this, colorBarL6, 100);
					}, 0);
					colorMap.range('all', {
						minX: 0,
						maxX: 360,
						minY: 0,
						maxY: 100
					});
					colorBar.range('rangeY', {
						minY: 0,
						maxY: 100
					});
					if (active.val('ahex') == null)
						break;
					colorMap.val('xy', {
						x: active.val('h'),
						y: 100 - active.val('v')
					}, colorMap);
					colorBar.val('y', 100 - active.val('s'), colorBar);
					break;
				case 'v':
					setTimeout(function() {
						setBG.call($this, colorMapDiv, '000000');
						setImgLoc.call($this, colorMapL1, -780);
						setImgLoc.call($this, colorMapL2, 260);
						setBG.call($this, colorBarDiv, hex);
						setImgLoc.call($this, colorBarL1, -520);
						setImgLoc.call($this, colorBarL2, 260);
						setAlpha.call($this, colorBarL2, 100);
						setImgLoc.call($this, colorBarL6, 260);
						setAlpha.call($this, colorBarL6, 100);
					}, 0);
					colorMap.range('all', {
						minX: 0,
						maxX: 360,
						minY: 0,
						maxY: 100
					});
					colorBar.range('rangeY', {
						minY: 0,
						maxY: 100
					});
					if (active.val('ahex') == null)
						break;
					colorMap.val('xy', {
						x: active.val('h'),
						y: 100 - active.val('s')
					}, colorMap);
					colorBar.val('y', 100 - active.val('v'), colorBar);
					break;
				case 'r':
					rgbMap = -1040;
					rgbBar = -780;
					colorMap.range('all', {
						minX: 0,
						maxX: 255,
						minY: 0,
						maxY: 255
					});
					colorBar.range('rangeY', {
						minY: 0,
						maxY: 255
					});
					if (active.val('ahex') == null)
						break;
					colorMap.val('xy', {
						x: active.val('b'),
						y: 255 - active.val('g')
					}, colorMap);
					colorBar.val('y', 255 - active.val('r'), colorBar);
					break;
				case 'g':
					rgbMap = -1560;
					rgbBar = -1820;
					colorMap.range('all', {
						minX: 0,
						maxX: 255,
						minY: 0,
						maxY: 255
					});
					colorBar.range('rangeY', {
						minY: 0,
						maxY: 255
					});
					if (active.val('ahex') == null)
						break;
					colorMap.val('xy', {
						x: active.val('b'),
						y: 255 - active.val('r')
					}, colorMap);
					colorBar.val('y', 255 - active.val('g'), colorBar);
					break;
				case 'b':
					rgbMap = -2080;
					rgbBar = -2860;
					colorMap.range('all', {
						minX: 0,
						maxX: 255,
						minY: 0,
						maxY: 255
					});
					colorBar.range('rangeY', {
						minY: 0,
						maxY: 255
					});
					if (active.val('ahex') == null)
						break;
					colorMap.val('xy', {
						x: active.val('r'),
						y: 255 - active.val('g')
					}, colorMap);
					colorBar.val('y', 255 - active.val('b'), colorBar);
					break;
				case 'a':
					setTimeout(function() {
						setBG.call($this, colorMapDiv, 'transparent');
						setImgLoc.call($this, colorMapL1, -260);
						setImgLoc.call($this, colorMapL2, -520);
						setImgLoc.call($this, colorBarL1, 260);
						setImgLoc.call($this, colorBarL2, 260);
						setAlpha.call($this, colorBarL2, 100);
						setImgLoc.call($this, colorBarL6, 0);
						setAlpha.call($this, colorBarL6, 100);
					}, 0);
					colorMap.range('all', {
						minX: 0,
						maxX: 360,
						minY: 0,
						maxY: 100
					});
					colorBar.range('rangeY', {
						minY: 0,
						maxY: 255
					});
					if (active.val('ahex') == null)
						break;
					colorMap.val('xy', {
						x: active.val('h'),
						y: 100 - active.val('v')
					}, colorMap);
					colorBar.val('y', 255 - active.val('a'), colorBar);
					break;
				default:
					throw ('Invalid Mode');
					break;
				}
				switch (colorMode) {
				case 'h':
					break;
				case 's':
				case 'v':
				case 'a':
					setTimeout(function() {
						setAlpha.call($this, colorMapL1, 100);
						setAlpha.call($this, colorBarL1, 100);
						setImgLoc.call($this, colorBarL3, 260);
						setAlpha.call($this, colorBarL3, 100);
						setImgLoc.call($this, colorBarL4, 260);
						setAlpha.call($this, colorBarL4, 100);
					}, 0);
					break;
				case 'r':
				case 'g':
				case 'b':
					setTimeout(function() {
						setBG.call($this, colorMapDiv, 'transparent');
						setBG.call($this, colorBarDiv, 'transparent');
						setAlpha.call($this, colorBarL1, 100);
						setAlpha.call($this, colorMapL1, 100);
						setImgLoc.call($this, colorMapL1, rgbMap);
						setImgLoc.call($this, colorMapL2, rgbMap - 260);
						setImgLoc.call($this, colorBarL1, rgbBar - 780);
						setImgLoc.call($this, colorBarL2, rgbBar - 520);
						setImgLoc.call($this, colorBarL3, rgbBar);
						setImgLoc.call($this, colorBarL4, rgbBar - 260);
						setImgLoc.call($this, colorBarL6, 260);
						setAlpha.call($this, colorBarL6, 100);
					}, 0);
					break;
				}
				if (active.val('ahex') == null)
					return;
				activeColorChanged.call($this, active);
			}, activeColorChanged = // Update color when user changes text
			// values
			function(ui, context) {
				if (context == null || (context != colorBar && context != colorMap))
					positionMapAndBarArrows.call($this, ui, context);
				setTimeout(function() {
					updatePreview.call($this, ui);
					updateMapVisuals.call($this, ui);
					updateBarVisuals.call($this, ui);
				}, 0);
			}, mapValueChanged = // user has dragged the ColorMap pointer
			function(ui, context) {
				var active = color.active;
				if (context != colorMap && active.val() == null)
					return;
				var xy = ui.val('all');
				switch (settings.color.mode) {
				case 'h':
					active.val('sv', {
						s: xy.x,
						v: 100 - xy.y
					}, context);
					break;
				case 's':
				case 'a':
					active.val('hv', {
						h: xy.x,
						v: 100 - xy.y
					}, context);
					break;
				case 'v':
					active.val('hs', {
						h: xy.x,
						s: 100 - xy.y
					}, context);
					break;
				case 'r':
					active.val('gb', {
						g: 255 - xy.y,
						b: xy.x
					}, context);
					break;
				case 'g':
					active.val('rb', {
						r: 255 - xy.y,
						b: xy.x
					}, context);
					break;
				case 'b':
					active.val('rg', {
						r: xy.x,
						g: 255 - xy.y
					}, context);
					break;
				}
			},
			// user has dragged the ColorBar slider
			colorBarValueChanged = function(ui, context) {
				var active = color.active;
				if (context != colorBar && active.val() == null)
					return;
				switch (settings.color.mode) {
				case 'h':
					active.val('h', {
						h: 360 - ui.val('y')
					}, context);
					break;
				case 's':
					active.val('s', {
						s: 100 - ui.val('y')
					}, context);
					break;
				case 'v':
					active.val('v', {
						v: 100 - ui.val('y')
					}, context);
					break;
				case 'r':
					active.val('r', {
						r: 255 - ui.val('y')
					}, context);
					break;
				case 'g':
					active.val('g', {
						g: 255 - ui.val('y')
					}, context);
					break;
				case 'b':
					active.val('b', {
						b: 255 - ui.val('y')
					}, context);
					break;
				case 'a':
					active.val('a', 255 - ui.val('y'), context);
					break;
				}
			},
			// position map and bar arrows to
			// match current color
			positionMapAndBarArrows = function(ui, context) {
				if (context != colorMap) {
					switch (settings.color.mode) {
					case 'h':
						var sv = ui.val('sv');
						colorMap.val('xy', {
							x: sv != null ? sv.s : 100,
							y: 100 - (sv != null ? sv.v : 100)
						}, context);
						break;
					case 's':
					case 'a':
						var hv = ui.val('hv');
						colorMap.val('xy', {
							x: hv && hv.h || 0,
							y: 100 - (hv != null ? hv.v : 100)
						}, context);
						break;
					case 'v':
						var hs = ui.val('hs');
						colorMap.val('xy', {
							x: hs && hs.h || 0,
							y: 100 - (hs != null ? hs.s : 100)
						}, context);
						break;
					case 'r':
						var bg = ui.val('bg');
						colorMap.val('xy', {
							x: bg && bg.b || 0,
							y: 255 - (bg && bg.g || 0)
						}, context);
						break;
					case 'g':
						var br = ui.val('br');
						colorMap.val('xy', {
							x: br && br.b || 0,
							y: 255 - (br && br.r || 0)
						}, context);
						break;
					case 'b':
						var rg = ui.val('rg');
						colorMap.val('xy', {
							x: rg && rg.r || 0,
							y: 255 - (rg && rg.g || 0)
						}, context);
						break;
					}
				}
				if (context != colorBar) {
					switch (settings.color.mode) {
					case 'h':
						colorBar.val('y', 360 - (ui.val('h') || 0), context);
						break;
					case 's':
						var s = ui.val('s');
						colorBar.val('y', 100 - (s != null ? s : 100), context);
						break;
					case 'v':
						var v = ui.val('v');
						colorBar.val('y', 100 - (v != null ? v : 100), context);
						break;
					case 'r':
						colorBar.val('y', 255 - (ui.val('r') || 0), context);
						break;
					case 'g':
						colorBar.val('y', 255 - (ui.val('g') || 0), context);
						break;
					case 'b':
						colorBar.val('y', 255 - (ui.val('b') || 0), context);
						break;
					case 'a':
						var a = ui.val('a');
						colorBar.val('y', 255 - (a != null ? a : 255), context);
						break;
					}
				}
			}, updatePreview = function(ui) {
				try {
					var all = ui.val('all');
					activePreview.css({
						backgroundColor: all && '#' + all.hex || 'transparent'
					});
					setAlpha.call($this, activePreview, all && Math.precision((all.a * 100) / 255, 4) || 0);
				} catch (e) {
				}
			}, updateMapVisuals = function(ui) {
				switch (settings.color.mode) {
				case 'h':
					setBG.call($this, colorMapDiv, new Color({
						h: ui.val('h') || 0,
						s: 100,
						v: 100
					}).val('hex'));
					break;
				case 's':
				case 'a':
					var s = ui.val('s');
					setAlpha.call($this, colorMapL2, 100 - (s != null ? s : 100));
					break;
				case 'v':
					var v = ui.val('v');
					setAlpha.call($this, colorMapL1, v != null ? v : 100);
					break;
				case 'r':
					setAlpha.call($this, colorMapL2, Math.precision((ui.val('r') || 0) / 255 * 100, 4));
					break;
				case 'g':
					setAlpha.call($this, colorMapL2, Math.precision((ui.val('g') || 0) / 255 * 100, 4));
					break;
				case 'b':
					setAlpha.call($this, colorMapL2, Math.precision((ui.val('b') || 0) / 255 * 100));
					break;
				}
				var a = ui.val('a');
				setAlpha.call($this, colorMapL3, Math.precision(((255 - (a || 0)) * 100) / 255, 4));
			}, updateBarVisuals = function(ui) {
				switch (settings.color.mode) {
				case 'h':
					var a = ui.val('a');
					setAlpha.call($this, colorBarL5, Math.precision(((255 - (a || 0)) * 100) / 255, 4));
					break;
				case 's':
					var hva = ui.val('hva'), saturatedColor = new Color({
						h: hva && hva.h || 0,
						s: 100,
						v: hva != null ? hva.v : 100
					});
					setBG.call($this, colorBarDiv, saturatedColor.val('hex'));
					setAlpha.call($this, colorBarL2, 100 - (hva != null ? hva.v : 100));
					setAlpha.call($this, colorBarL5, Math.precision(((255 - (hva && hva.a || 0)) * 100) / 255, 4));
					break;
				case 'v':
					var hsa = ui.val('hsa'), valueColor = new Color({
						h: hsa && hsa.h || 0,
						s: hsa != null ? hsa.s : 100,
						v: 100
					});
					setBG.call($this, colorBarDiv, valueColor.val('hex'));
					setAlpha.call($this, colorBarL5, Math.precision(((255 - (hsa && hsa.a || 0)) * 100) / 255, 4));
					break;
				case 'r':
				case 'g':
				case 'b':
					var hValue = 0, vValue = 0, rgba = ui.val('rgba');
					if (settings.color.mode == 'r') {
						hValue = rgba && rgba.b || 0;
						vValue = rgba && rgba.g || 0;
					} else if (settings.color.mode == 'g') {
						hValue = rgba && rgba.b || 0;
						vValue = rgba && rgba.r || 0;
					} else if (settings.color.mode == 'b') {
						hValue = rgba && rgba.r || 0;
						vValue = rgba && rgba.g || 0;
					}
					var middle = vValue > hValue ? hValue : vValue;
					setAlpha.call($this, colorBarL2, hValue > vValue ? Math.precision(((hValue - vValue) / (255 - vValue)) * 100, 4) : 0);
					setAlpha.call($this, colorBarL3, vValue > hValue ? Math.precision(((vValue - hValue) / (255 - hValue)) * 100, 4) : 0);
					setAlpha.call($this, colorBarL4, Math.precision((middle / 255) * 100, 4));
					setAlpha.call($this, colorBarL5, Math.precision(((255 - (rgba && rgba.a || 0)) * 100) / 255, 4));
					break;
				case 'a':
					var a = ui.val('a');
					setBG.call($this, colorBarDiv, ui.val('hex') || '000000');
					setAlpha.call($this, colorBarL5, a != null ? 0 : 100);
					setAlpha.call($this, colorBarL6, a != null ? 100 : 0);
					break;
				}
			}, setBG = function(el, c) {
				el.css({
					backgroundColor: c && c.length == 6 && '#' + c || 'transparent'
				});
			}, setImg = function(img, src) {
				if (isLessThanIE7 && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1)) {
					img.attr('pngSrc', src);
					img.css({
						backgroundImage: 'none',
						filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')'
					});
				} else
					img.css({
						backgroundImage: 'url(\'' + src + '\')'
					});
			}, setImgLoc = function(img, y) {
				img.css({
					top: y + 'px'
				});
			}, setAlpha = function(obj, alpha) {
				obj.css({
					visibility: alpha > 0 ? 'visible' : 'hidden'
				});
				if (alpha > 0 && alpha < 100) {
					if (isLessThanIE7) {
						var src = obj.attr('pngSrc');
						if (src != null && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1))
							obj.css({
								filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\') progid:DXImageTransform.Microsoft.Alpha(opacity=' + alpha + ')'
							});
						else
							obj.css({
								opacity: Math.precision(alpha / 100, 4)
							});
					} else
						obj.css({
							opacity: Math.precision(alpha / 100, 4)
						});
				} else if (alpha == 0 || alpha == 100) {
					if (isLessThanIE7) {
						var src = obj.attr('pngSrc');
						if (src != null && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1))
							obj.css({
								filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')'
							});
						else
							obj.css({
								opacity: ''
							});
					} else
						obj.css({
							opacity: ''
						});
				}
			},
			// revert color to original color when opened
			revertColor = function() {
				color.active.val('ahex', color.current.val('ahex'));
			},
			// commit the color changes
			commitColor = function() {
				color.current.val('ahex', color.active.val('ahex'));
			}, radioClicked = function(e) {
				$(this).parents('tbody:first').find('input:radio[value!="' + e.target.value + '"]').removeAttr('checked');
				setColorMode.call($this, e.target.value);
			}, currentClicked = function() {
				revertColor.call($this);
			},
			// 点击取消按钮
			cancelClicked = function() {
				revertColor.call($this);
				settings.window.expandable && hide.call($this);
				$.isFunction(cancelCallback) && cancelCallback.call($this, color.active, cancelButton);
			},
			// 点击OK按钮
			okClicked = function() {
				commitColor.call($this);
				settings.window.expandable && hide.call($this);
				$.isFunction(commitCallback) && commitCallback.call($this, color.active, okButton);
			},
			// 打开拾色器时
			iconImageClicked = function() {
				for ( var i in ContainerList) {
					var container = ContainerList[i];
					var object = ObjectList[i];
					if (object == $this) {
						// 位置
						var g = "50%", b = "50%", c = $(document);
						if (typeof g == "string" && g.indexOf("%") != -1) {
							var f = parseFloat(g) * 0.01;
							g = $(window).height() * f + c.scrollTop() - $(container).height() * f;
						}
						if (typeof b == "string" && b.indexOf("%") != -1) {
							b = $(window).width() * f + c.scrollLeft() - $(container).width() * f;
						}
						var top = Math.round(g) + "px";
						var left = Math.round(b) + "px";

						container.css({
							position: "absolute",
							top: top,
							left: left
						});

						continue;
					}
					object.revertColor();
					settings.window.expandable && object.hide();
					$.isFunction(object.cancelCallback) && object.cancelCallback();
				}

				show.call($this);
			}, currentColorChanged = function(ui, context) {
				var hex = ui.val('hex');
				currentPreview.css({
					backgroundColor: hex && '#' + hex || 'transparent'
				});
				setAlpha.call($this, currentPreview, Math.precision(((ui.val('a') || 0) * 100) / 255, 4));
			}, expandableColorChanged = function(ui, context) {
				var hex = ui.val('hex');
				var va = ui.val('va');
				iconColor.css({
					backgroundColor: hex && '#' + hex || 'transparent'
				});
				setAlpha.call($this, iconAlpha, Math.precision(((255 - (va && va.a || 0)) * 100) / 255, 4));
				if (settings.window.bindToInput && settings.window.updateInputColor)
					settings.window.input.css({
						backgroundColor: hex && '#' + hex || 'transparent',
						color: va == null || va.v > 75 ? '#000000' : '#ffffff'
					});
			}, moveBarMouseDown = function(e) {
				var element = settings.window.element, // local copies for YUI
				// compressor
				page = settings.window.page;
				elementStartX = parseInt(container.css('left'));
				elementStartY = parseInt(container.css('top'));
				pageStartX = e.pageX;
				pageStartY = e.pageY;
				// bind events to document to move window - we will unbind these
				// on mouseup
				$(document).bind('mousemove', documentMouseMove).bind('mouseup', documentMouseUp);
				e.preventDefault(); // prevent attempted dragging of the column
			}, documentMouseMove = function(e) {
				container.css({
					left: elementStartX - (pageStartX - e.pageX) + 'px',
					top: elementStartY - (pageStartY - e.pageY) + 'px'
				});
				if (settings.window.expandable && !$.support.boxModel)
					container.prev().css({
						left: container.css("left"),
						top: container.css("top")
					});
				e.stopPropagation();
				e.preventDefault();
				return false;
			}, documentMouseUp = function(e) {
				$(document).unbind('mousemove', documentMouseMove).unbind('mouseup', documentMouseUp);
				e.stopPropagation();
				e.preventDefault();
				return false;
			}, quickPickClicked = function(e) {
				e.preventDefault();
				e.stopPropagation();
				color.active.val('ahex', $(this).attr('title') || null, e.target);
				return false;
			}, commitCallback = $.isFunction($arguments[1]) && $arguments[1] || null, liveCallback = $.isFunction($arguments[2]) && $arguments[2] || null, cancelCallback = $.isFunction($arguments[3]) && $arguments[3] || null, show = function() {
				color.current.val('ahex', color.active.val('ahex'));
				var attachIFrame = function() {
					if (!settings.window.expandable || $.support.boxModel)
						return;
					var table = container.find('table:first');
					container.before('<iframe/>');
					container.prev().css({
						width: table.width(),
						height: container.height(),
						opacity: 0,
						position: 'absolute',
						left: container.css("left"),
						top: container.css("top")
					});
				};
				if (settings.window.expandable) {
					$(document.body).children('div.jPicker.Container').css({
						zIndex: 10
					});
					container.css({
						zIndex: 20
					});
				}
				switch (settings.window.effects.type) {
				case 'fade':
					container.fadeIn(settings.window.effects.speed.show, attachIFrame);
					break;
				case 'slide':
					container.slideDown(settings.window.effects.speed.show, attachIFrame);
					break;
				case 'show':
				default:
					container.show(settings.window.effects.speed.show, attachIFrame);
					break;
				}
			}, hide = function() {
				var removeIFrame = function() {
					if (settings.window.expandable)
						container.css({
							zIndex: 10
						});
					if (!settings.window.expandable || $.support.boxModel)
						return;
					container.prev().remove();
				};
				switch (settings.window.effects.type) {
				case 'fade':
					container.fadeOut(settings.window.effects.speed.hide, removeIFrame);
					break;
				case 'slide':
					container.slideUp(settings.window.effects.speed.hide, removeIFrame);
					break;
				case 'show':
				default:
					container.hide(settings.window.effects.speed.hide, removeIFrame);
					break;
				}
			}, initialize = function() {
				var win = settings.window, popup = win.expandable ? $($this).next().find('.Container:first') : null;
				container = win.expandable ? $('<div/>') : $($this);
				container.addClass('jPicker Container');
				if (win.expandable)
					container.hide();
				container.get(0).onselectstart = function(event) {
					if (event.target.nodeName.toLowerCase() !== 'input')
						return false;
				};

				// 添加容器
				ContainerList.push(container);

				// inject html source code - we are using a single table for
				// this control - I know tables are considered bad, but it takes
				// care of equal height columns and
				// this control really is tabular data, so I believe it is the
				// right move
				var all = color.active.val('all');
				if (win.alphaPrecision < 0)
					win.alphaPrecision = 0;
				else if (win.alphaPrecision > 2)
					win.alphaPrecision = 2;
				var controlHtml = '<table class="jPicker" cellpadding="0" cellspacing="0"><tbody>' + (win.expandable ? '<tr><td class="Move" colspan="5">&nbsp;</td></tr>' : '') + '<tr><td rowspan="9"><h2 class="Title">' + (win.title || localization.text.title) + '</h2><div class="Map"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><img src="' + images.clientPath + images.colorMap.arrow.file + '" class="Arrow"/></div></td><td rowspan="9"><div class="Bar"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><span class="Map4">&nbsp;</span><span class="Map5">&nbsp;</span><span class="Map6">&nbsp;</span><img src="' + images.clientPath + images.colorBar.arrow.file
						+ '" class="Arrow"/></div></td><td colspan="2" class="Preview">' + localization.text.newColor + '<div><span class="Active" title="' + localization.tooltips.colors.newColor + '">&nbsp;</span><span class="Current" title="' + localization.tooltips.colors.currentColor + '">&nbsp;</span></div>' + localization.text.currentColor + '</td><td rowspan="9" class="Button"><input type="button" class="Ok" value="' + localization.text.ok + '" title="' + localization.tooltips.buttons.ok + '"/><input type="button" class="Cancel" value="' + localization.text.cancel + '" title="' + localization.tooltips.buttons.cancel + '"/><hr/><div class="Grid">&nbsp;</div></td></tr><tr class="Hue"><td class="Radio"><label title="' + localization.tooltips.hue.radio
						+ '"><input type="radio" value="h"' + (settings.color.mode == 'h' ? ' checked="checked"' : '') + '/>H:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.h : '') + '" title="' + localization.tooltips.hue.textbox + '"/>&nbsp;&deg;</td></tr><tr class="Saturation"><td class="Radio"><label title="' + localization.tooltips.saturation.radio + '"><input type="radio" value="s"' + (settings.color.mode == 's' ? ' checked="checked"' : '') + '/>S:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.s : '') + '" title="' + localization.tooltips.saturation.textbox + '"/>&nbsp;%</td></tr><tr class="Value"><td class="Radio"><label title="' + localization.tooltips.value.radio
						+ '"><input type="radio" value="v"' + (settings.color.mode == 'v' ? ' checked="checked"' : '') + '/>V:</label><br/><br/></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.v : '') + '" title="' + localization.tooltips.value.textbox + '"/>&nbsp;%<br/><br/></td></tr><tr class="Red"><td class="Radio"><label title="' + localization.tooltips.red.radio + '"><input type="radio" value="r"' + (settings.color.mode == 'r' ? ' checked="checked"' : '') + '/>R:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.r : '') + '" title="' + localization.tooltips.red.textbox + '"/></td></tr><tr class="Green"><td class="Radio"><label title="' + localization.tooltips.green.radio + '"><input type="radio" value="g"'
						+ (settings.color.mode == 'g' ? ' checked="checked"' : '') + '/>G:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.g : '') + '" title="' + localization.tooltips.green.textbox + '"/></td></tr><tr class="Blue"><td class="Radio"><label title="' + localization.tooltips.blue.radio + '"><input type="radio" value="b"' + (settings.color.mode == 'b' ? ' checked="checked"' : '') + '/>B:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.b : '') + '" title="' + localization.tooltips.blue.textbox + '"/></td></tr><tr class="Alpha"><td class="Radio">'
						+ (win.alphaSupport ? '<label title="' + localization.tooltips.alpha.radio + '"><input type="radio" value="a"' + (settings.color.mode == 'a' ? ' checked="checked"' : '') + '/>A:</label>' : '&nbsp;') + '</td><td class="Text">' + (win.alphaSupport ? '<input type="text" maxlength="' + (3 + win.alphaPrecision) + '" value="' + (all != null ? Math.precision((all.a * 100) / 255, win.alphaPrecision) : '') + '" title="' + localization.tooltips.alpha.textbox + '"/>&nbsp;%' : '&nbsp;') + '</td></tr><tr class="Hex"><td colspan="2" class="Text"><label title="' + localization.tooltips.hex.textbox + '">#:<input type="text" maxlength="6" class="Hex" value="' + (all != null ? all.hex : '') + '"/></label>'
						+ (win.alphaSupport ? '<input type="text" maxlength="2" class="AHex" value="' + (all != null ? all.ahex.substring(6) : '') + '" title="' + localization.tooltips.hex.alpha + '"/></td>' : '&nbsp;') + '</tr></tbody></table>';
				if (win.expandable) {
					container.html(controlHtml);
					if ($(document.body).children('div.jPicker.Container').length == 0)
						$(document.body).prepend(container);
					else
						$(document.body).children('div.jPicker.Container:last').after(container);
					container.mousedown(function() {
						$(document.body).children('div.jPicker.Container').css({
							zIndex: 10
						});
						container.css({
							zIndex: 20
						});
					});
					// positions must be set and display set to
					// absolute before source code injection or
					// IE will size the container to fit the
					// window
					/**
					 * container.css({ left: win.position.x == 'left' ?
					 * (popup.offset().left - 530 - (win.position.y == 'center' ?
					 * 25 : 0)) + 'px' : win.position.x == 'center' ?
					 * (popup.offset().left - 260) + 'px' : win.position.x ==
					 * 'right' ? (popup.offset().left - 10 + (win.position.y ==
					 * 'center' ? 25 : 0)) + 'px' : win.position.x ==
					 * 'screenCenter' ? (($(document).width() >> 1) - 260) +
					 * 'px' : (popup.offset().left + parseInt(win.position.x)) +
					 * 'px', position: 'absolute', top: win.position.y == 'top' ?
					 * (popup.offset().top - 312) + 'px' : win.position.y ==
					 * 'center' ? (popup.offset().top - 156) + 'px' :
					 * win.position.y == 'bottom' ? (popup.offset().top + 25) +
					 * 'px' : (popup.offset().top + parseInt(win.position.y)) +
					 * 'px' });
					 */
				} else {
					container = $($this);
					container.html(controlHtml);
				}
				// initialize the objects to the source code just injected
				var tbody = container.find('tbody:first');
				colorMapDiv = tbody.find('div.Map:first');
				colorBarDiv = tbody.find('div.Bar:first');
				var MapMaps = colorMapDiv.find('span'), BarMaps = colorBarDiv.find('span');
				colorMapL1 = MapMaps.filter('.Map1:first');
				colorMapL2 = MapMaps.filter('.Map2:first');
				colorMapL3 = MapMaps.filter('.Map3:first');
				colorBarL1 = BarMaps.filter('.Map1:first');
				colorBarL2 = BarMaps.filter('.Map2:first');
				colorBarL3 = BarMaps.filter('.Map3:first');
				colorBarL4 = BarMaps.filter('.Map4:first');
				colorBarL5 = BarMaps.filter('.Map5:first');
				colorBarL6 = BarMaps.filter('.Map6:first');
				// create color pickers and maps
				colorMap = new Slider(colorMapDiv, {
					map: {
						width: images.colorMap.width,
						height: images.colorMap.height
					},
					arrow: {
						image: images.clientPath + images.colorMap.arrow.file,
						width: images.colorMap.arrow.width,
						height: images.colorMap.arrow.height
					}
				});
				colorMap.bind(mapValueChanged);
				colorBar = new Slider(colorBarDiv, {
					map: {
						width: images.colorBar.width,
						height: images.colorBar.height
					},
					arrow: {
						image: images.clientPath + images.colorBar.arrow.file,
						width: images.colorBar.arrow.width,
						height: images.colorBar.arrow.height
					}
				});
				colorBar.bind(colorBarValueChanged);
				colorPicker = new ColorValuePicker(tbody, color.active, win.expandable && win.bindToInput ? win.input : null, win.alphaPrecision);
				var hex = all != null ? all.hex : null, preview = tbody.find('.Preview'), button = tbody.find('.Button');
				activePreview = preview.find('.Active:first').css({
					backgroundColor: hex && '#' + hex || 'transparent'
				});
				currentPreview = preview.find('.Current:first').css({
					backgroundColor: hex && '#' + hex || 'transparent'
				}).bind('click', currentClicked);
				setAlpha.call($this, currentPreview, Math.precision(color.current.val('a') * 100) / 255, 4);
				okButton = button.find('.Ok:first').bind('click', okClicked);
				cancelButton = button.find('.Cancel:first').bind('click', cancelClicked);
				grid = button.find('.Grid:first');
				setTimeout(function() {
					setImg.call($this, colorMapL1, images.clientPath + 'Maps.png');
					setImg.call($this, colorMapL2, images.clientPath + 'Maps.png');
					setImg.call($this, colorMapL3, images.clientPath + 'map-opacity.png');
					setImg.call($this, colorBarL1, images.clientPath + 'Bars.png');
					setImg.call($this, colorBarL2, images.clientPath + 'Bars.png');
					setImg.call($this, colorBarL3, images.clientPath + 'Bars.png');
					setImg.call($this, colorBarL4, images.clientPath + 'Bars.png');
					setImg.call($this, colorBarL5, images.clientPath + 'bar-opacity.png');
					setImg.call($this, colorBarL6, images.clientPath + 'AlphaBar.png');
					setImg.call($this, preview.find('div:first'), images.clientPath + 'preview-opacity.png');
				}, 0);
				tbody.find('td.Radio input').bind('click', radioClicked);
				// initialize quick list
				if (color.quickList && color.quickList.length > 0) {
					var html = '';
					for (i = 0; i < color.quickList.length; i++) {
						/*
						 * if default colors are hex strings, change them to
						 * color objects
						 */
						if ((typeof (color.quickList[i])).toString().toLowerCase() == 'string')
							color.quickList[i] = new Color({
								hex: color.quickList[i]
							});
						var alpha = color.quickList[i].val('a');
						var ahex = color.quickList[i].val('ahex');
						if (!win.alphaSupport && ahex)
							ahex = ahex.substring(0, 6) + 'ff';
						var quickHex = color.quickList[i].val('hex');
						html += '<span class="QuickColor"' + (ahex && ' title="#' + ahex + '"' || '') + ' style="background-color:' + (quickHex && '#' + quickHex || '') + ';' + (quickHex ? '' : 'background-image:url(' + images.clientPath + 'NoColor.png)') + (win.alphaSupport && alpha && alpha < 255 ? ';opacity:' + Math.precision(alpha / 255, 4) + ';filter:Alpha(opacity=' + Math.precision(alpha / 2.55, 4) + ')' : '') + '">&nbsp;</span>';
					}
					setImg.call($this, grid, images.clientPath + 'bar-opacity.png');
					grid.html(html);
					grid.find('.QuickColor').click(quickPickClicked);
				}
				setColorMode.call($this, settings.color.mode);
				color.active.bind(activeColorChanged);
				$.isFunction(liveCallback) && color.active.bind(liveCallback);
				color.current.bind(currentColorChanged);
				// bind to input
				if (win.expandable) {
					$this.icon = popup.parents('.Icon:first');
					iconColor = $this.icon.find('.Color:first').css({
						backgroundColor: hex && '#' + hex || 'transparent'
					});
					iconAlpha = $this.icon.find('.Alpha:first');
					setImg.call($this, iconAlpha, images.clientPath + 'bar-opacity.png');
					setAlpha.call($this, iconAlpha, Math.precision(((255 - (all != null ? all.a : 0)) * 100) / 255, 4));
					iconImage = $this.icon.find('.Image:first').css({
						backgroundImage: 'url(\'' + images.clientPath + images.picker.file + '\')'
					}).bind('click', iconImageClicked);
					if (win.bindToInput && win.updateInputColor)
						win.input.css({
							backgroundColor: hex && '#' + hex || 'transparent',
							color: all == null || all.v > 75 ? '#000000' : '#ffffff'
						});
					moveBar = tbody.find('.Move:first').bind('mousedown', moveBarMouseDown);
					color.active.bind(expandableColorChanged);
				} else
					show.call($this);
			}, destroy = function() {
				container.find('td.Radio input').unbind('click', radioClicked);
				currentPreview.unbind('click', currentClicked);
				cancelButton.unbind('click', cancelClicked);
				okButton.unbind('click', okClicked);
				if (settings.window.expandable) {
					iconImage.unbind('click', iconImageClicked);
					moveBar.unbind('mousedown', moveBarMouseDown);
					$this.icon = null;
				}
				container.find('.QuickColor').unbind('click', quickPickClicked);
				colorMapDiv = null;
				colorBarDiv = null;
				colorMapL1 = null;
				colorMapL2 = null;
				colorMapL3 = null;
				colorBarL1 = null;
				colorBarL2 = null;
				colorBarL3 = null;
				colorBarL4 = null;
				colorBarL5 = null;
				colorBarL6 = null;
				colorMap.destroy();
				colorMap = null;
				colorBar.destroy();
				colorBar = null;
				colorPicker.destroy();
				colorPicker = null;
				activePreview = null;
				currentPreview = null;
				okButton = null;
				cancelButton = null;
				grid = null;
				commitCallback = null;
				cancelCallback = null;
				liveCallback = null;
				container.html('');
				for (i = 0; i < List.length; i++)
					if (List[i] == $this)
						List.splice(i, 1);
			}, images = settings.images, // local copies for YUI compressor
			localization = settings.localization, color = {
				active: (typeof (settings.color.active)).toString().toLowerCase() == 'string' ? new Color({
					ahex: !settings.window.alphaSupport && settings.color.active ? settings.color.active.substring(0, 6) + 'ff' : settings.color.active
				}) : new Color({
					ahex: !settings.window.alphaSupport && settings.color.active.val('ahex') ? settings.color.active.val('ahex').substring(0, 6) + 'ff' : settings.color.active.val('ahex')
				}),
				current: (typeof (settings.color.active)).toString().toLowerCase() == 'string' ? new Color({
					ahex: !settings.window.alphaSupport && settings.color.active ? settings.color.active.substring(0, 6) + 'ff' : settings.color.active
				}) : new Color({
					ahex: !settings.window.alphaSupport && settings.color.active.val('ahex') ? settings.color.active.val('ahex').substring(0, 6) + 'ff' : settings.color.active.val('ahex')
				}),
				quickList: settings.color.quickList
			};
			var object = $.extend(true, $this, // public properties, methods,
			// and callbacks
			{
				revertColor: revertColor,
				commitCallback: commitCallback, // commitCallback function can
				// be overridden to return the
				// selected color to a method
				// you specify when the user
				// clicks "OK"
				liveCallback: liveCallback, // liveCallback function can be
				// overridden to return the selected
				// color to a method you specify in
				// live mode (continuous update)
				cancelCallback: cancelCallback, // cancelCallback function can
				// be overridden to a method you
				// specify when the user clicks
				// "Cancel"
				color: color,
				show: show,
				hide: hide,
				destroy: destroy
			// destroys this control entirely, removing all events and objects,
			// and removing itself from the List
			});
			List.push($this);
			ObjectList.push(object);
			setTimeout(function() {
				initialize.call($this);
			}, 0);
		});
	};
	$.fn.jPicker.defaults = /*
							 * jPicker defaults - you can change anything in
							 * this section (such as the clientPath to your
							 * images) without fear of breaking the program
							 */
	{
		window: {
			title: null, /*
							 * any title for the jPicker window itself -
							 * displays "Drag Markers To Pick A Color" if left
							 * null
							 */
			effects: {
				type: 'fade', /*
								 * effect used to show/hide an expandable
								 * picker. Acceptable values "slide", "show",
								 * "fade"
								 */
				speed: {
					show: 'fast', /*
									 * duration of "show" effect. Acceptable
									 * values are "fast", "slow", or time in ms
									 */
					hide: 'fast' /*
									 * duration of "hide" effect. Acceptable
									 * values are "fast", "slow", or time in ms
									 */
				}
			},
			position: {
				x: 'screenCenter', /*
									 * acceptable values "left", "center",
									 * "right", "screenCenter", or relative px
									 * value
									 */
				y: 'top' /*
							 * acceptable values "top", "bottom", "center", or
							 * relative px value
							 */
			},
			expandable: false, /*
								 * default to large static picker - set to true
								 * to make an expandable picker (small icon with
								 * popup) - set automatically when binded to
								 * input element
								 */
			liveUpdate: true, /*
								 * set false if you want the user to have to
								 * click "OK" before the binded input box
								 * updates values (always "true" for expandable
								 * picker)
								 */
			alphaSupport: false, /* set to true to enable alpha picking */
			alphaPrecision: 0, /*
								 * set decimal precision for alpha percentage
								 * display - hex codes do not map directly to
								 * percentage integers - range 0-2
								 */
			updateInputColor: true
		/* set to false to prevent binded input colors from changing */
		},
		color: {
			mode: 'h', /*
						 * acceptabled values "h" (hue), "s" (saturation), "v"
						 * (value), "r" (red), "g" (green), "b" (blue), "a"
						 * (alpha)
						 */
			active: new Color({
				ahex: '#ffcc00ff'
			}), /*
				 * acceptable values are any declared $.jPicker.Color object or
				 * string HEX value (e.g. #ffc000) WITH OR WITHOUT the "#"
				 * prefix
				 */
			quickList: /* the quick pick color list */
			[ new Color({
				h: 360,
				s: 33,
				v: 100
			}), /*
				 * acceptable values are any declared $.jPicker.Color object or
				 * string HEX value (e.g. #ffc000) WITH OR WITHOUT the "#"
				 * prefix
				 */
			new Color({
				h: 360,
				s: 66,
				v: 100
			}), new Color({
				h: 360,
				s: 100,
				v: 100
			}), new Color({
				h: 360,
				s: 100,
				v: 75
			}), new Color({
				h: 360,
				s: 100,
				v: 50
			}), new Color({
				h: 180,
				s: 0,
				v: 100
			}), new Color({
				h: 30,
				s: 33,
				v: 100
			}), new Color({
				h: 30,
				s: 66,
				v: 100
			}), new Color({
				h: 30,
				s: 100,
				v: 100
			}), new Color({
				h: 30,
				s: 100,
				v: 75
			}), new Color({
				h: 30,
				s: 100,
				v: 50
			}), new Color({
				h: 180,
				s: 0,
				v: 90
			}), new Color({
				h: 60,
				s: 33,
				v: 100
			}), new Color({
				h: 60,
				s: 66,
				v: 100
			}), new Color({
				h: 60,
				s: 100,
				v: 100
			}), new Color({
				h: 60,
				s: 100,
				v: 75
			}), new Color({
				h: 60,
				s: 100,
				v: 50
			}), new Color({
				h: 180,
				s: 0,
				v: 80
			}), new Color({
				h: 90,
				s: 33,
				v: 100
			}), new Color({
				h: 90,
				s: 66,
				v: 100
			}), new Color({
				h: 90,
				s: 100,
				v: 100
			}), new Color({
				h: 90,
				s: 100,
				v: 75
			}), new Color({
				h: 90,
				s: 100,
				v: 50
			}), new Color({
				h: 180,
				s: 0,
				v: 70
			}), new Color({
				h: 120,
				s: 33,
				v: 100
			}), new Color({
				h: 120,
				s: 66,
				v: 100
			}), new Color({
				h: 120,
				s: 100,
				v: 100
			}), new Color({
				h: 120,
				s: 100,
				v: 75
			}), new Color({
				h: 120,
				s: 100,
				v: 50
			}), new Color({
				h: 180,
				s: 0,
				v: 60
			}), new Color({
				h: 150,
				s: 33,
				v: 100
			}), new Color({
				h: 150,
				s: 66,
				v: 100
			}), new Color({
				h: 150,
				s: 100,
				v: 100
			}), new Color({
				h: 150,
				s: 100,
				v: 75
			}), new Color({
				h: 150,
				s: 100,
				v: 50
			}), new Color({
				h: 180,
				s: 0,
				v: 50
			}), new Color({
				h: 180,
				s: 33,
				v: 100
			}), new Color({
				h: 180,
				s: 66,
				v: 100
			}), new Color({
				h: 180,
				s: 100,
				v: 100
			}), new Color({
				h: 180,
				s: 100,
				v: 75
			}), new Color({
				h: 180,
				s: 100,
				v: 50
			}), new Color({
				h: 180,
				s: 0,
				v: 40
			}), new Color({
				h: 210,
				s: 33,
				v: 100
			}), new Color({
				h: 210,
				s: 66,
				v: 100
			}), new Color({
				h: 210,
				s: 100,
				v: 100
			}), new Color({
				h: 210,
				s: 100,
				v: 75
			}), new Color({
				h: 210,
				s: 100,
				v: 50
			}), new Color({
				h: 180,
				s: 0,
				v: 30
			}), new Color({
				h: 240,
				s: 33,
				v: 100
			}), new Color({
				h: 240,
				s: 66,
				v: 100
			}), new Color({
				h: 240,
				s: 100,
				v: 100
			}), new Color({
				h: 240,
				s: 100,
				v: 75
			}), new Color({
				h: 240,
				s: 100,
				v: 50
			}), new Color({
				h: 180,
				s: 0,
				v: 20
			}), new Color({
				h: 270,
				s: 33,
				v: 100
			}), new Color({
				h: 270,
				s: 66,
				v: 100
			}), new Color({
				h: 270,
				s: 100,
				v: 100
			}), new Color({
				h: 270,
				s: 100,
				v: 75
			}), new Color({
				h: 270,
				s: 100,
				v: 50
			}), new Color({
				h: 180,
				s: 0,
				v: 10
			}), new Color({
				h: 300,
				s: 33,
				v: 100
			}), new Color({
				h: 300,
				s: 66,
				v: 100
			}), new Color({
				h: 300,
				s: 100,
				v: 100
			}), new Color({
				h: 300,
				s: 100,
				v: 75
			}), new Color({
				h: 300,
				s: 100,
				v: 50
			}), new Color({
				h: 180,
				s: 0,
				v: 0
			}), new Color({
				h: 330,
				s: 33,
				v: 100
			}), new Color({
				h: 330,
				s: 66,
				v: 100
			}), new Color({
				h: 330,
				s: 100,
				v: 100
			}), new Color({
				h: 330,
				s: 100,
				v: 75
			}), new Color({
				h: 330,
				s: 100,
				v: 50
			}), new Color() ]
		},
		images: {
			/* Path to image files */
			clientPath: 'js/jPicker/images/',
			colorMap: {
				width: 256,
				height: 256,
				arrow: {
					/* ColorMap arrow icon */
					file: 'mappoint.gif',
					width: 15,
					height: 15
				}
			},
			colorBar: {
				width: 20,
				height: 256,
				arrow: {
					/* ColorBar arrow icon */
					file: 'rangearrows.gif',
					width: 20,
					height: 7
				}
			},
			picker: {
				/* Color Picker icon */
				file: 'picker.gif',
				width: 25,
				height: 24
			}
		},
		/*
		 * alter these to change the text presented by the picker (e.g.
		 * different language)
		 */
		localization: {
			text: {
				title: '拖动标记选择颜色',
				newColor: '新颜色',
				currentColor: '当前颜色',
				ok: '确定',
				cancel: '取消'
			},
			tooltips: {
				colors: {
					newColor: '新颜色 - 点击确定按钮提交',
					currentColor: '点击取消按钮恢复原来的颜色'
				},
				buttons: {
					ok: '提交选择的新颜色',
					cancel: '取消并恢复到原来的颜色'
				},
				hue: {
					radio: '设置为色调的颜色模式',
					textbox: '输入色调值（0-360%）'
				},
				saturation: {
					radio: '设置饱和度颜色模式',
					textbox: '输入饱和度值（0-100%）'
				},
				value: {
					radio: '设置值颜色模式',
					textbox: '输入一个颜色值（0-100%）'
				},
				red: {
					radio: '设置红色模式',
					textbox: '输入一个红色值 (0-255)'
				},
				green: {
					radio: '设置绿色值',
					textbox: '输入一个绿色值 (0-255)'
				},
				blue: {
					radio: '设置蓝色值',
					textbox: '输入一个蓝色值 (0-255)'
				},
				alpha: {
					radio: '设置为α颜色模',
					textbox: '输入α颜色值 (0-100)'
				},
				hex: {
					textbox: '设置一个十六进制颜色值 (#000000-#ffffff)',
					alpha: '输入一个十六进制的颜色值 (#00-#ff)'
				}
			}
		},
		/*
		 * alter these to change the text presented by the picker (e.g.
		 * different language)
		 */
		localization_EN: {
			text: {
				title: 'Drag Markers To Pick A Color',
				newColor: 'new',
				currentColor: 'current',
				ok: 'OK',
				cancel: 'Cancel'
			},
			tooltips: {
				colors: {
					newColor: 'New Color - Press &ldquo;OK&rdquo; To Commit',
					currentColor: 'Click To Revert To Original Color'
				},
				buttons: {
					ok: 'Commit To This Color Selection',
					cancel: 'Cancel And Revert To Original Color'
				},
				hue: {
					radio: 'Set To &ldquo;Hue&rdquo; Color Mode',
					textbox: 'Enter A &ldquo;Hue&rdquo; Value (0-360&deg;)'
				},
				saturation: {
					radio: 'Set To &ldquo;Saturation&rdquo; Color Mode',
					textbox: 'Enter A &ldquo;Saturation&rdquo; Value (0-100%)'
				},
				value: {
					radio: 'Set To &ldquo;Value&rdquo; Color Mode',
					textbox: 'Enter A &ldquo;Value&rdquo; Value (0-100%)'
				},
				red: {
					radio: 'Set To &ldquo;Red&rdquo; Color Mode',
					textbox: 'Enter A &ldquo;Red&rdquo; Value (0-255)'
				},
				green: {
					radio: 'Set To &ldquo;Green&rdquo; Color Mode',
					textbox: 'Enter A &ldquo;Green&rdquo; Value (0-255)'
				},
				blue: {
					radio: 'Set To &ldquo;Blue&rdquo; Color Mode',
					textbox: 'Enter A &ldquo;Blue&rdquo; Value (0-255)'
				},
				alpha: {
					radio: 'Set To &ldquo;Alpha&rdquo; Color Mode',
					textbox: 'Enter A &ldquo;Alpha&rdquo; Value (0-100)'
				},
				hex: {
					textbox: 'Enter A &ldquo;Hex&rdquo; Color Value (#000000-#ffffff)',
					alpha: 'Enter A &ldquo;Alpha&rdquo; Value (#00-#ff)'
				}
			}
		}
	};

})(jQuery, '1.1.6');